<template>
	<basic-container>
		<avue-crud :option="option" :data="data" v-model="form" :page="page" ref="crud" @search-change="searchChange"
		 @search-reset="searchReset" @current-change="currentChange" @size-change="sizeChange" @row-del="rowDel" @row-update="rowUpdate"
		 @row-save="rowSave" @on-load="onLoad" :before-open="beforeOpen">
			<template slot-scope="{row}" slot="contentForm">
				<mavon-editor ref=md @imgAdd="$imgAdd" @imgDel="$imgDel" v-model="doc" @save="saveDoc" @change="updateDoc" />
			</template>
		</avue-crud>
	</basic-container>
</template>

<script>
	import request from '@/router/axios';
	import {
		mavonEditor
	} from 'mavon-editor'
	import 'mavon-editor/dist/css/index.css'
	export default {
		components: {
			mavonEditor
		},
		data() {
			return {
				query: {},
				page: {
					pageSize: 10,
					currentPage: 1,
					total: 0
				},
				doc: '',
				form: {},
				option: {
					searchMenuSpan: 4,
					border: true,
					index: true,
					dialogWidth: '80%',
					//dialogFullscreen:true,
					refreshBtn: false,
					excelBtn: true,
					menuWidth: '150px',
					column: [{
							label: "类别",
							searchSpan: 4,
							prop: "bigClass",
							search: true,
							searchFilterable: true,
							filterable: true,
							width: 200,
							type: "select",
							dicData: [],
							props: {
								label: "name",
								value: "code"
							},
							rules: [{
								required: true,
								trigger: "blur"
							}]
						}, {
							label: "产废单位",
							prop: "smallClass",
							type: "select",
							dicData: [],
							searchFilterable: true,
							filterable: true,
							search: true,
							width: 300,
							props: {
								label: "name",
								value: "code"
							},
							rules: [{
								required: true,
								trigger: "blur"
							}]
						},
						{
							label: "标题",
							prop: "title"
						},
						{
							label: "内容",
							prop: "content",
							hide: true,
							span: 24,
							formslot: true
						}
					]
				},
				data: []
			};
		},
		created() {
			request({
				url: '/api/code/getCodes',
				params: {
					typeId: '21b36d9c-ed4a-41fc-bc5a-4931342b8135'
				}
			}).then(res => {
				this.findObject(this.option.column, 'bigClass').dicData = res.data.data;
			});
			request({
				url: '2/api/WmsOrganization/getpages',
				method: 'get',
				params: {
					limit: 0
				}
			}).then(res => {
				this.findObject(this.option.column, 'smallClass').dicData = res.data.data;
			});
		},
		mounted() {},
		methods: {
			$imgAdd(pos, $file) {
				// 第一步.将图片上传到服务器.
				var formdata = new FormData();
				formdata.append('file', $file, $file.name);
				request({
					url: '/api/files/upload',
					method: 'post',
					data: formdata
				}).then(res => {
					const data = res.data.data
					this.$refs.md.$img2Url(pos, data.url);
					if (this.form.files == undefined)
						this.form.files = data.id;
					else
						this.form.files += ',' + data.id;
				});
			},
			$imgDel(pos) {
				console.log(pos)
				//delete this.imgFile[pos]
			},
			updateDoc(markdown, html) {
				this.form.content = html
			},
			saveDoc(markdown, html) {
				// 此时会自动将 markdown 和 html 传递到这个方法中
				console.log("markdown内容:" + markdown);
				console.log("html内容:" + html);
			},
			beforeOpen(done, type) {
				this.doc = ''
				if (["edit"].includes(type)) {
					this.doc = this.form.content
				}
				done();
			},
			rowSave(row, loading, done) {
				this.request({
					url: '/api/BaseInfo/add',
					method: 'post',
					data: row
				}).then(() => {
					loading();
					this.onLoad(this.page);
					done();
				}, error => {
					done();
					console.log(error);
				});
			},
			rowUpdate(row, index, loading, done) {
				return this.request({
					url: '/api/BaseInfo/edit',
					method: 'post',
					data: row
				}).then(() => {
					loading();
					this.onLoad(this.page);
				}, error => {
					done();
					console.log(error);
				});
			},
			rowDel(row) {
				this.$confirm("确定数据删除?", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						return this.request({
							url: '/api/BaseInfo/remove',
							method: 'post',
							params: {
								ids: row.id
							}
						});
					})
					.then(() => {
						this.onLoad(this.page);
					});
			},
			searchReset() {
				this.query = {};
				this.page.currentPage = 1;
				this.onLoad(this.page);
			},
			searchChange(params, done) {
				this.page.currentPage = 1;
				this.query = params;
				this.onLoad(this.page);
				done();
			},
			currentChange(currentPage) {
				this.page.currentPage = currentPage;
			},
			sizeChange(pageSize) {
				this.page.pageSize = pageSize;
			},
			onLoad(page) {
				this.request({
					url: '/api/BaseInfo/getpages',
					method: 'get',
					params: {
						key: this.query.title == undefined ? '' : this.query.title,
						type: this.query.bigClass == undefined ? '' : this.query.bigClass,
						where: this.query.smallClass == undefined ? '' : this.query.smallClass,
						page: page.currentPage,
						limit: page.pageSize
					}
				}).then(res => {
					const data = res.data
					this.data = data.data;
					this.page.total = data.remark;
				});
			}
		}
	};
</script>

<style>
</style>
